<template>
  <view class="my-container">
    <view class="my-form">
      <view class="area">
        <view class="cell-column">
          <view class="cell-text">
            投诉类型<text style="color: red;">*</text>
          </view>
          <view class="cell-option">
            <picker class="selector" mode="selector" @change="bindTypeChange" :range="typeArr" range-key="label">
              <view class="selector-input" :style="{color: selectType ? '' : 'rgba(0,0,0,0.65)'}">{{ selectType ? selectType.label : '请选择投诉类型' }}</view>
              <image class="selectIcon" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
            </picker>
          </view>
        </view>
      </view>
      <view class="area">
        <view class="cell-column">
<!--          <view class="cell-text">
            投诉内容<text style="color: red;">*</text>
          </view> -->
          <view class="cell-option">
            <textarea class="text-input" cols="30" rows="20" v-model="sForm.suggestContent"
              placeholder="请输入投诉内容" maxlength="500" style="font-size: 32rpx;padding: 24rpx 0;"></textarea>
              <text class="textarea-num">{{sForm.suggestContent.length}}/500</text>
          </view>
        </view>
      </view>
      <view class="area">
        <view class="cell-column">
<!--          <view class="cell-text">
            上传照片（不超过3张）
          </view> -->
          <view class="imageList">
            <view class="imgItem" v-for="(item,index) in fileUrlList" :key="index" >
              <image class="image" :src="item.attaPath"></image>
              <image :src="`${img_url}/statics/std/static/delete.png`" @click="deleteImg(item)"></image>
            </view>
            <image v-if="fileUrlList.length < 3" class="image" @click="uploadImg" :src="`${img_baseUrl}/statics/std/static/upload.png`"></image>
          </view>
        </view>
      </view>
      <view class="area">
        <view class="cell-column">
          <view class="cell-text">
            联系人<text style="color: red;">*</text>
          </view>
          <view class="cell-option">
            <input class="input" v-model="sForm.userName" placeholder="请输入联系人" />
          </view>
        </view>
        <view class="cell-column">
          <view class="cell-text">
            联系电话<text style="color: red;">*</text>
          </view>
          <view class="cell-option">
            <input class="input" type="number" maxlength="11" v-model="sForm.userPhone" placeholder="请输入联系电话" />
          </view>
        </view>
      </view>
    </view>
    <view class="my-footer" :style="{bottom: (GET_SAFEAREA_BOTTOM > 0 ? GET_SAFEAREA_BOTTOM : 34) + 'px'}" @click="submitFun">
      <text class="text">保存</text>
    </view>
  </view>
</template>

<script>
  import requestPost, {requestGet} from '@/utils/request.js';
  import {mapGetters} from 'vuex'
  import {throttle} from '@/utils/index.js'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js';
  const img_url = process.env.VUE_APP_BASEURL_IMG_API;
  const api_url = process.env.VUE_APP_BASEURL_API;
  export default {
    data() {
      return {
		  img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
        typeArr: [],
        selectType: null,
        fileUrlList: [],
        sForm: {
          suggestionType: null,
          suggestContent: '',
          userName: '',
          userPhone: ''
        }
      };
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM])
    },
    mounted() {
      console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
      this.suggestionType();
    },
    methods: {
      bindTypeChange(e) {
        const rangeIndex = e.detail.value;
        const rangeItem = this.typeArr[rangeIndex];
        this.selectType = rangeItem;
        this.sForm.suggestionType = rangeItem.value;
      },
      suggestionType(){
        requestGet("/dict/data/list",{dictType:"suggestion_type"},'/system').then(res => {
          if(res.code === 200){
            this.typeArr = res.rows.map(i => {
              return {
                label: i.dictLabel,
                value: i.dictValue
              }
            });
          }
        })
      },
      handleInput(e){
        this.sForm.suggestContent = e.detail.value;
      },
      deleteImg(src){
        const imgArr = this.fileUrlList.filter(i => i != src);
        this.fileUrlList = imgArr;
      },
      submitFun: throttle(function() {
        if(!this.sForm.suggestionType){
          uni.showToast({title: '请选择投诉类型！', icon: 'none'});
          return
        }
        if(!this.sForm.suggestContent || this.sForm.suggestContent == ''){
          uni.showToast({title: '请输入投诉内容！', icon: 'none'});
          return
        }
        if(!this.sForm.userName || this.sForm.userName == ''){
          uni.showToast({title: '请输入联系人！', icon: 'none'});
          return
        }
        if(!this.sForm.userPhone || this.sForm.userPhone == ''){
          uni.showToast({title: '请输入联系电话！', icon: 'none'});
          return
        }
        uni.showLoading({title: '保存数据中'});
        const attaIds = this.fileUrlList.length > 0 ? this.fileUrlList.map(i => i.attaId).join(',') : '';
        const params = {...this.sForm, attaIds};
        console.log('/suggestion/add======params', params)
        requestPost('/suggestion', params, '/baseplatform').then(res => {
          uni.hideLoading();
          if(res.code === 200){
            uni.showToast({title: '操作成功！'});
            uni.navigateBack();
          }else{
            uni.showToast({title: res.msg || '操作失败！', icon: 'none'});
          }
        })
      }, 500),
      // 上传方法
      uploadImg(){
        const that = this;
        wx.chooseImage({
          count: 3 - that.fileUrlList.length,
          sourceType: ['album', 'camera'],
          success(res) {
            if (res.tempFiles[0].size >= 5242880) {
              uni.showToast({title: '图片不能大于5M!', icon: 'none'})
              return
            } else {
              const tempFilePaths = res.tempFilePaths;
              res.tempFilePaths.map(item => {
                wx.uploadFile({
                  url: api_url + "/file/uploadAttaData",
                  filePath: item,
                  header: {
                    Authorization: "Bearer " + uni.getStorageSync("X-Token"),
                  },
                  name: 'file',
                  success(result) {
                    const data = JSON.parse(result.data);
                    if (data.code == 200) {
                      that.fileUrlList = [...that.fileUrlList, {attaId: data.data.attaId, attaName: data.data.attaName, attaPath: img_url + data.data.attaPath}];
                    } else {
                      uni.showToast({title: data.msg || '上传失败', icon: 'none'});
                    }
                  }
                })
              })
            }
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .my-container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F5F7F6;
    .my-form {
      width: calc(100% - 48rpx);
      height: 100%;
      overflow: auto;
      .area{
        width: 100%;
        background-color: #FFFFFF;
        margin-top: 16rpx;
        border-radius: 24rpx;
      }
      .cell-column{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        min-height: 104rpx;
        padding: 0 24rpx;
        // padding: 0 32rpx 32rpx 32rpx;
        .cell-text {
          width: 184rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.5);
          line-height: 104rpx;
        }

        .cell-option {
          position: relative;
          width: 100%;
          height: 100%;
          flex: 1;

          .selector {
            height: 104rpx;
            width: 100%;
            background: #FFFFFF;
            position: relative;
            .selectIcon{
              position: absolute;
              top: 32rpx;
              right: 24rpx;
              height: 32rpx;
              width: 32rpx;
            }
          }

          .selector-input {
            height: 104rpx;
            line-height: 104rpx;
            width: 100%;
            font-size: 28rpx;
            padding-left: 32rpx;
            border-radius: 8rpx;
            // color: rgba(0,0,0,0.2);
          }
          .text-input{
            width: initial;
            font-size: 28rpx !important;
            height: 300rpx;
            background: #FFFFFF;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
          .textarea-num{
            position: absolute;
            bottom: 24rpx;
            right: 24rpx;
            font-size: 28rpx;
            color: rgba(0,0,0,0.2);
          }
          .input{
            height: 104rpx;
            line-height: 104rpx;
            font-size: 28rpx;
            padding-left: 32rpx;
            background: #FFFFFF;
            border-radius: 8rpx;
          }
        }
        .imageList{
          width: 100%;
          height: auto;
          margin: 20rpx 0;
          background: #fff;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: flex-start;
          justify-content: flex-start;
          .image {
            width:152rpx;
            height:152rpx;
            margin-right: 24rpx;
            border-radius: 8rpx;
            // border: 1rpx solid #999999;
          }
          .imgItem{
            position: relative;
            image:last-child{
              position: absolute;
              right: 24rpx;
              top: 0rpx;
              height: 48rpx;
              width: 48rpx;
            }
          }
        }
      }
    }

    .my-footer {
      position: fixed;
      bottom: 34rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 598rpx;
      height: 84rpx;
      background: #3FAA73;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      .text {
        font-size: 32rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 32rpx;
      }
    }
  }
</style>